<script setup lang="ts">
import {ref, computed} from "vue";
import {useRouter} from "vue-router";
import {Search, Bell, ArrowsMinimize, ArrowsMaximize, Mail, Calendar, ThumbUp} from "@vicons/tabler";
import {useFullScreen} from "@/utils/screen.ts";
import type {RouteRecordRaw} from "vue-router";


interface INotice {
    id: number;
    content: string;
    created_at: string;
    is_read: boolean;
    type: "mail" | "meeting" | "like";
    category: "notice" | "follow" | "todo";
}


const router = useRouter();
const {isFullScreen, handleScreenChange} = useFullScreen();


// 菜单查询相关
const showSearch = ref<boolean>(false);
const searchForm = ref<string>("");
const searchResult = ref<RouteRecordRaw[]>([]);


/**
 * 是否展示查询窗口
 * @param show
 */
const handleSearchShow = (show: boolean) => {
    showSearch.value = show;
    if (!show) {
        searchForm.value = "";
        searchResult.value = [];
    }
}


/**
 * 菜单查询
 */
const handleSearch = () => {
    if (!searchForm.value) return;

    // TODO: 实现菜单查询逻辑
    searchResult.value = router.getRoutes()
        .filter((route) => route.meta?.breadcrumb?.toString()
            .includes(searchForm.value));
}


/**
 * 选择并跳转菜单
 * @param activeRoute
 */
const handleSelect = (activeRoute: RouteRecordRaw) => {
    router.push(activeRoute.path);
    showSearch.value = false;
}


// 通知相关
const activeTab = ref<"notice" | "follow" | "todo">("notice");
const tabTextMap = {
    notice: "通知",
    follow: "关注",
    todo: "待办"
}

// 通知数据
const noticeData = ref<INotice[]>([
    {
        id: 1,
        content: "约翰·维尔泽回复了你的邮件",
        created_at: "2024-03-04 00:00:00",
        is_read: true,
        type: "mail",
        category: "notice"
    },
    {
        id: 2,
        content: "约翰·维尔邀请您参加会议",
        created_at: "2024-03-04 00:00:00",
        is_read: false,
        type: "meeting",
        category: "todo"
    },
    {
        id: 3,
        content: "约翰·维尔邀请您参加会议",
        created_at: "2024-03-04 00:00:00",
        is_read: false,
        type: "like",
        category: "follow"
    },
    {
        id: 4,
        content: "约翰·维尔邀请您参加会议",
        created_at: "2024-03-04 00:00:00",
        is_read: true,
        type: "meeting",
        category: "todo"
    },

]);


// 计算不同类型通知数量
const noticeCount = computed(() => noticeData.value.filter(n => n.category === "notice").length);
const followCount = computed(() => noticeData.value.filter(n => n.category === "follow").length);
const todoCount = computed(() => noticeData.value.filter(n => n.category === "todo").length);


// 当前标签页的通知列表
const currentNotices = computed(() =>
    noticeData.value.filter(notice => notice.category === activeTab.value)
);
const unreadCount = computed(() => noticeData.value.filter(n => !n.is_read).length);
const hasUnreadNotice = computed(() => unreadCount.value > 0);


/**
 * 访问文章
 * @param notice
 */
const handleReadNotice = (notice: INotice) => {
    // TODO: 已读通知逻辑
    notice.is_read = true;
}


/**
 * 清除通知
 */
const handleClear = () => {
    // TODO: 清除通知逻辑
    noticeData.value = noticeData.value.filter(notice => notice.category !== activeTab.value);
}
</script>

<template>
    <div class="header-operate">
        <n-space>
            <!-- 菜单查询 -->
            <n-popover trigger="click" placement="bottom" :show-arrow="false" :show="showSearch"
                       @update:show="handleSearchShow">
                <template #trigger>
                    <n-button secondary circle>
                        <template #icon>
                            <Search/>
                        </template>
                    </n-button>
                </template>
                <div class="search-content">
                    <n-input v-model:value="searchForm" placeholder="查询菜单" @keyup.enter="handleSearch" clearable>
                        <template #prefix>
                            <n-icon :component="Search"/>
                        </template>
                    </n-input>
                    <div class="search-result" v-if="searchResult.length">
                        <n-scrollbar style="max-height: 300px;">
                            <div v-for="item in searchResult" :key="item.path" class="result-item"
                                 @click="handleSelect(item)">
                                <span>{{ item.meta?.breadcrumb }}</span>
                                <span class="route-path">{{ item.path }}</span>
                            </div>
                        </n-scrollbar>
                    </div>
                </div>
            </n-popover>

            <!-- 全屏/非全屏 -->
            <n-button secondary circle @click="handleScreenChange">
                <template #icon>
                    <ArrowsMinimize v-if="isFullScreen"/>
                    <ArrowsMaximize v-else/>
                </template>
            </n-button>

            <!-- 通知信息 -->
            <n-popover trigger="click" placement="bottom" :show-arrow="false">
                <template #trigger>
                    <n-button secondary circle :class="{'has-notice': hasUnreadNotice}">
                        <template #icon>
                            <Bell/>
                        </template>
                        <n-tag v-if="unreadCount" class="notice-tag" :bordered="false" round type="error" size="small">
                            {{ unreadCount }}
                        </n-tag>
                    </n-button>
                </template>

                <div class="notice-content">
                    <div class="notice-header">
                        <n-tabs type="line" v-model:value="activeTab">
                            <n-tab name="notice" class="tab-item">
                                通知 &nbsp;({{ noticeCount }})
                            </n-tab>
                            <n-tab name="follow" class="tab-item">
                                关注 &nbsp;({{ followCount }})
                            </n-tab>
                            <n-tab name="todo" class="tab-item">
                                待办 &nbsp;({{ todoCount }})
                            </n-tab>
                        </n-tabs>
                    </div>

                    <div class="notice-list">
                        <n-scrollbar style="max-height: 400px;">
                            <div class="notice-list-inner">
                                <div v-for="item in currentNotices" :key="item.id" class="notice-item"
                                     :class="{'unread' : !item.is_read}" @click="handleReadNotice(item)">
                                    <div class="notice-main">
                                        <div class="notice-icon">
                                            <n-icon size="22">
                                                <Mail v-if="item.type === 'mail'"/>
                                                <ThumbUp v-if="item.type === 'like'"/>
                                                <Calendar v-if="item.type === 'meeting'"/>
                                            </n-icon>
                                        </div>
                                        <div class="notice-info">
                                            <div class="content">{{ item.content }}</div>
                                            <div class="datetime">{{ item.created_at }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </n-scrollbar>
                    </div>

                    <div class="notice-footer">
                        <n-button text type="success" block @click="handleClear">
                            Clear {{ tabTextMap[activeTab] }}
                        </n-button>
                    </div>
                </div>
            </n-popover>
        </n-space>
    </div>
</template>

<style lang="scss">
.n-popover {
    padding: 10px !important;

    .n-popover-content {
        padding: 0 !important;
    }

    // 查询窗口
    .search-content {

        .search-result {
            margin-top: 10px;

            .result-item {
                padding: 10px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-radius: 3px;
                transition: background-color 0.3s;

                &:hover {
                    background-color: #e7f5ee;
                }

                .route-path {
                    font-size: 12px;
                }
            }
        }
    }

    // 通知窗口
    .notice-content {
        .notice-header {
            .n-tabs-nav {
                padding: 0;
                margin: 0;
                justify-content: space-around;

                .n-tabs-wrapper {
                    width: 100%;
                    padding: 0;

                    .n-tabs-tab-wrapper {
                        justify-content: center;
                    }

                    .n-tabs-tab {
                        padding: 10px 0;
                        font-size: 12px;
                    }
                }

                &::before {
                    display: none; // 移除底部边框
                }
            }
        }

        .notice-list {
            min-height: 200px;
            max-height: 400px;
            overflow: auto;

            .notice-list-inner {
                margin-top: 10px;
            }

            .notice-item {
                position: relative;
                padding: 10px;
                cursor: pointer;
                transition: all 0.3s;
                border-radius: 3px;
                margin-bottom: 6px;
                border: 1px solid #eeeeee;

                &:last-child {
                    margin-bottom: 0;
                }

                &:hover {
                    background-color: #e7f5ee;
                }

                &.unread {
                    background-color: #f2f2f2;

                    .notice-info .content {
                        font-weight: 500;
                    }
                }

                .notice-main {
                    display: flex;
                    align-items: flex-start;
                    gap: 10px;

                    .notice-icon {
                        flex-shrink: 0;
                        width: 22px;
                        height: 22px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    .notice-info {
                        flex: 1;
                        min-width: 0;

                        .content {
                            font-size: 12px;
                            line-height: 1.5;
                            margin-bottom: 10px;
                            word-break: break-all;
                        }

                        .datetime {
                            font-size: 12px;
                        }
                    }
                }
            }
        }

        .notice-footer {
            padding: 12px 12px 2px;
            border-top: 1px solid #eeeeee;

            .n-button {
                font-size: 12px;
            }
        }
    }
}


// 顶部操作区样式
.header-operate {
    .n-button {
        &.has-notice {
            position: relative;

            .n-icon {
                font-size: 18px;
                transition: all 0.3s ease;
            }

            .notice-tag {
                position: absolute;
                top: 4px;
                right: 4px;
                transform: translate(50%, -50%);
                font-size: 12px;
                padding: 0 6px;
                min-width: 18px;
                height: 18px;
                line-height: 18px;
            }
        }

        .n-button__icon {
            margin-left: 6px;
        }
    }
}
</style>